<template>
  <div>
    <van-nav-bar title="收藏">
      <template #left>
        <van-icon size="18" name="arrow-left" @click="goback" />
      </template>
      <template #right>
        <div @click="clear_collect">清空</div>
      </template>
    </van-nav-bar>
    <div v-if="xianshi" class="content">
      <div
        class="hang"
        v-for="(shuju, index) in user_business_collect"
        :key="index"
        @click="shangjia_fn(index)"
      >
        <van-image class="hang_l" :src="shuju.budiness_headimg" alt="" />
        <div class="hang_z"></div>
        <div class="hang_r">
          <div>
            <div>
              <div>
                <div>{{ shuju.budiness_name }}</div>
                <div class="piyue_status">
                  {{ shuju.budiness_time }}&nbsp;&nbsp;{{ shuju.budiness_juli }}
                </div>
              </div>
              <div class="pingfen">
                <span>评分:4.9</span>
                <span>&nbsp;月售:{{ shuju.budiness_xiaoliang }}</span>
                <span>&nbsp;人均:￥{{ shuju.budiness_renjun }}</span>
              </div>
              <div class="zhoubao_time">
                <span>起送￥{{ shuju.budiness_qisong }}</span>
                <span>配送约￥{{ shuju.budiness_peisongfei }}</span>
              </div>
              <div class="rexiao">{{ shuju.budiness_paiming }}</div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="collect_food_list"
        v-for="(item, index) in user_food_collect"
        :key="index + 100"
        @click="food_fn(index)"
      >
        <div class="collect_food_left">
          <van-image class="food_img" :src="item.food_img" alt="" />
        </div>
        <div class="collect_food_right">
          <div class="food_name">{{ item.food_name }}</div>
          <div class="yueshou">
            月售：<span>{{ item.food_xiaoliang }}</span>
          </div>
          <div class="jiage">
            <div class="food_zhekou">￥{{ item.food_zhekoujia }}</div>
            <div class="food_yuanjia">￥{{ item.food_yuanjia }}</div>
          </div>
          <div>{{ item.food_xiangqing }}</div>
        </div>
      </div>
    </div>
    <van-empty
      v-else
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="没有收藏商家或食品哟"
      />
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
export default {
  name: "collet",
  data() {
    return {
      user_id: JSON.parse(localStorage.getItem("waimai")).user_id,
      user_food_collect: [],
      user_business_collect: [],
      xianshi: false
      // img_tmp: require("@/assets/IMG/美食.png"),
    };
  },

  created() {
    this.axios({
      method: "post",
      url: "http://localhost:3000/get_user_collect",
      data: {
        user_id: this.user_id,
      },
    })
      .then((res) => {
        if (res.data.data.length == 0) {
        this.xianshi = false
      } else {
          this.xianshi = true
        var collect_data = res.data.data;
        collect_data.map((item) => {
          // console.log(item)
          if (item.food_id != null) {
            this.user_food_collect.push(item.food_id);
          } else if (item.budiness_id != null) {
            this.user_business_collect.push(item.budiness_id);
          }
        });
        this.axios({
          method: "post",
          url: "http://localhost:3000/get_collect_data",
          data: {
            food_id: this.user_food_collect,
            budiness_id: this.user_business_collect,
          },
        })
          .then((res) => {
            this.user_food_collect = res.data.food_arr;
            this.user_business_collect = res.data.business_arr;
            // console.log(this.user_food_collect);
            // console.log(this.user_business_collect);
          })
          .catch((err) => {
            console.log(err);
          });
          }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  
  methods: {
    goback() {
      this.$router.go(-1);
    },
    shangjia_fn(index) {
      this.$router.push({
        name: "shangjia",
        params: {
          shangjia_name: this.user_business_collect[index].budiness_name,
          shangjia_id: this.user_business_collect[index].budiness_id,
        },
      });
    },
    food_fn(index) {
      this.$router.push({
        name: "fooddetail",
        params: { id: this.user_food_collect[index].food_id },
      });
    },
    clear_collect() {
      if(this.user_food_collect.length == 0 && this.user_business_collect.length == 0) {
        Toast("已经很干净了")
        return
      }
      Dialog.confirm({
        title: "提示",
        message: "确定要清空收藏吗",
      })
        .then(() => {
          this.axios({
            method: "POST",
            url: "http://localhost:3000/clear_user_collect",
            data: {
              user_id: this.user_id,
            },
          })
            .then((res) => {
              console.log(res);
              Toast.success("操作成功");
              this.$nextTick(() => {
                this.user_food_collect = []
                this.user_business_collect = []
                this.xianshi = false
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style scoped>
.van-icon {
  color: black;
}

.van-nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
}

/deep/.van-nav-bar__content {
  background-color: rgb(231, 231, 231);
}

.content {
  margin-top: 46px;
}

.hang {
  width: 90%;
  margin: 10px auto;
  border-radius: 10px;
  background-color: white;
  display: flex;
  padding: 15px 8px;
}
.hang_l {
  width: 25%;
}
.hang_z {
  flex: 1;
}
.pingfen {
  font-size: 10px;
  line-height: 20px;
}
.hang_r {
  flex: 18;
}
.piyue_status {
  margin-top: 23px;
  width: 33%;
  float: right;
  text-align: center;
  color: black;
  font-size: 10px;
}
.zhoubao_time {
  font-size: 12px;
}
.rexiao {
  border: 1px solid #4c572e;
  color: white;
  font-size: 10px;
  width: 60%;
  background-color: #8fa849;
  text-align: center;
  border-radius: 15px;
  margin-top: 5px;
}

.collect_food_list {
  border-radius: 10px;
  background-color: white;
  width: 90%;
  padding: 10px 8px;
  margin: auto;
  margin-bottom: 10px;
}

.collect_food_list {
  display: flex;
}

.food_img {
  width: 100px;
  height: 100px;
}

.jiage {
  display: flex;
}

.food_name {
  font-size: 19px;
}

.yueshou {
  font-size: 14px;
  color: grey;
}

.food_zhekou {
  font-size: 20px;
  color: red;
}

.food_yuanjia {
  line-height: 30px;
  text-decoration-line: line-through;
  color: grey;
}

/deep/.van-image__img {
  border-radius: 5px;
}

.collect_food_right {
  margin-left: 10px;
}

.custom-image {
  margin-top: 60px;
}
</style>